{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>日历</li>
  </ol>
<section class="demo-section">
<div id="pageContent">



<article><p>在日历上能够让用户直观了解日常安排并进行规划。ZUI提供了实用简单的日历插件。</p><div class="alert alert-warning">
  <h4>兼容性提示</h4>
  <ul>
    <li>在触摸屏上无法支持拖拽功能；</li>
    <li>在小屏幕上无法获得最佳体验。</li>
  </ul>
</div></article>

<section><header><h3>实例</h3></header>
  <article><p>在下面的示例中展示了按月展示的日程安排。点击日历上方的操作按钮切换月份，拖动日历中的事件到其他位置来重新安排时间。</p><p>按周或查看某一天的日程视图将在后续版本中到来。</p><div class="example">
  <div class="calendar limit-event-title" id="calendarExample">

  </div>
<pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- HTML 代码 --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"calendar"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"calendar"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* JS 代码 */</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">calendar</span><span class="pun">();</span></code></pre></article>
</section>


<script src="__ZUI__/lib/calendar/zui.calendar.js"></script>

<script>
$(function(){
	afterPageLoad();
})
function afterPageLoad() {
  var now = new Date();
  var start = now.getSeconds(),
      calendars = ['success', 'danger', 'important', 'warning', 'info', 'specail', 'primary'],
      rooms = ['A003', 'A004', 'A010', 'A143', 'B008', 'B098', 'B487', 'B340', 'Z000', 'Z431', 'Z018', 'Z864'],
      peoples = ['奥特曼', '行者孙', '地卜师', '绿巨人', 'Catouse', '路人丙'],
      events = ['进食', '喝水', '交谈', '睡觉', '捶打墙壁', '自言自语', '搬动椅子', '唱歌', '上网', '梦游', '观望天花板'],
      eventsTypes = ['happy', 'sad', ':]'],
      tools = ['桌子', '椅子', '水杯', '枪', '随从'],
      descs = ['没有完成', '这次失败了', '徒劳', '很满意', '禁止再次发生', '也行', '情况不明', '发现未知征兆'];

  var calEventGenerater = function() {
          var start = now.clone().addDays(Math.random() * 400 - 200);
          var e = {
              title: (Math.random() > 0.5 ? ('和' + peoples[Math.floor(Math.random()*peoples.length)]) : '') + events[Math.floor(Math.random()*events.length)],
              desc: descs[Math.floor(Math.random()*descs.length)],
              calendar: calendars[Math.floor(Math.random()*calendars.length)],
              allDay: Math.random() > 0.9,
              start: start,
              end: start.clone().addDays(Math.random() > 0.9 ? Math.random() * 5 : 0)
          };
          return e;
      };
  var dtDataGenerater = function(rowsCount) {
          var data = {
              cols: [
                  {width: 100, text: '#', type: 'number', flex: false, colClass: 'text-center'},
                  {sort: 'down', width: 160, text: '时间', type: 'date', flex: false, colClass: ''},
                  {width: 80, text: '房间', type: 'string', flex: false, colClass: ''},
                  {width: 100, text: '人物', type: 'string', flex: false, colClass: ''},
                  {width: 'auto', text: '事件', type: 'string', flex: false, colClass: ''},
                  {width: 100, text: '事件类型', type: 'string', flex: true, colClass: 'text-center'},
                  {sort: false, width: 200, text: '描述', type: 'string', flex: true, colClass: ''},
                  {width: 100, text: '相关人物', type: 'string', flex: true, colClass: ''},
                  {width: 100, text: '相关物品', type: 'string', flex: true, colClass: ''},
                  {width: 60, text: '评分', type: 'number', flex: false, colClass: 'text-center text-important'},
                  {sort: false, width: 'auto', text: '操作', type: 'string', flex: false, colClass: ''},
              ],
              rows: []
          };
          for (var i = 0; i < rowsCount; i++) {
              var row = {checked: Math.random() > 0.9, data: [
                  start + i + 101000,
                  now.format('yyyy-MM-dd hh:mm:ss'),
                  rooms[Math.floor(Math.random()*rooms.length)],
                  peoples[Math.floor(Math.random()*peoples.length)],
                  events[Math.floor(Math.random()*events.length)],
                  eventsTypes[Math.floor(Math.random()*eventsTypes.length)],
                  descs[Math.floor(Math.random()*descs.length)],
                  peoples[Math.floor(Math.random()*peoples.length)],
                  tools[Math.floor(Math.random()*tools.length)],
                  Math.floor(Math.random()*100)/10,
                  "<a href='###'><i class='icon-ok-sign'></i></a> &nbsp; <a href='###' class='text-danger'><i class='icon-trash'></i></a> "
              ]};
              data.rows.push(row);
              now = new Date(now.getTime() - (Math.random()*1000*60*60));
          };
          return data;
      },
      calDataGenerater = function(count) {
          var data = {
              calendars: [
                  {name: "success", color: 'green'},
                  {name: "warning", color: 'yellow'},
                  {name: "danger", color: 'red'},
                  {name: "info", color: 'blue'},
                  {name: "important", color: 'brown'},
                  {name: "special", color: 'purple'},
                  {name: "primary", color: 'primary'}
              ],
              events: []
          };
          for (var i = count - 1; i >= 0; i--) {
              data.events.push(calEventGenerater());
          }
          return data;
      };
  $(function() {
      $('#pageContent .calendar').each(function() {
          var $this = $(this);
          var data = calDataGenerater($this.data('exampleCount') || 100);
          $this.calendar({data: data, clickEvent: function(e) {
              $.zui.messager.show('您点击了 <strong>' + e.event.title + '</strong>');
          }, beforeChange: function(e) {
              if(e.change === 'start')
              {
                  $.zui.messager.show('起始时间更改为 ' + e.to.format('yyyy年MM月dd日 hh:mm'));
              }
          }});
      });
  });
}
</script><section><header><h3>使用方法</h3></header><article><h4>引入资源</h4><p>日历为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/calendar/zui.calendar.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/calendar/zui.calendar.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>启动参数</h4><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>参数</th>
      <th>值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>startView</code></td>
      <td><em>   <code>"month"</code> (默认)，月份视图</em></td>
      <td>起始视图，默认为月份视图</td>
    </tr>
    <tr>
      <td><code>startDate</code></td>
      <td>   <code>"today"</code> (默认)，其实日期为当天
<em>   <code>"2014-8-14"</code>，表示日期的字符串
</em>   一个<code>Date</code>实例</td>
      <td>起始视图所在的日期</td>
    </tr>
    <tr>
      <td><code>limitEventTitle</code></td>
      <td><em>   <code>true</code> (默认)
</em>   <code>false</code></td>
      <td>是否限制事件标题长度，如果为<code>true</code>则会限制事件标题在一行显示，超出部分将隐藏</td>
    </tr>
    <tr>
      <td><code>storage</code></td>
      <td><em>   <code>true</code> (默认)
</em>   <code>false</code></td>
      <td>是否启用本地存储来增强体验，如果为<code>ture</code>则会记录用户所在的视图和日期，刷新或关闭浏览器再次访问会重现最后的视图</td>
    </tr>
    <tr>
      <td><code>withHeader</code></td>
      <td><em>   <code>true</code> (默认)
</em>   <code>false</code></td>
      <td>是否显示带操作栏的头部，如果为<code>true</code>则会显示头部，包含切换视图或日期的按钮</td>
    </tr>
    <tr>
      <td><code>dragThenDrop</code></td>
      <td><em>   <code>true</code> (默认)
</em>   <code>false</code></td>
      <td>是否启用事件拖放功能，如果为<code>true</code>则能够拖拽一个事件到另一个日期方框内来更改事件日程</td>
    </tr>
    <tr>
      <td><code>hideEmptyWeekends</code></td>
      <td><em>   <code>true</code> (默认)
</em>   <code>false</code></td>
      <td>当周末没有事件时是否自动缩小周末所在对列已节省空间。</td>
    </tr>
    <tr>
      <td><code>lang</code></td>
      <td><code>"zh_cn"</code>、<code>"zh_tw"</code>、<code>"en"</code></td>
      <td>当前界面所使用的语言，如果留空则会从<code>html</code>标签上读取lang属性，否则设置为 <code>"zh_cn"</code></td>
    </tr>
    <tr>
      <td><code>data</code></td>
      <td><code>{calendars: {}, events: []}</code></td>
      <td>初始加载的日历数据</td>
    </tr>
    <tr>
      <td><code>eventSorter</code></td>
      <td><code>null</code></td>
      <td>指定一个函数用于对事件进行排序时比较两个事件对象大小。提供两个参数  <code>event1</code>, <code>event2</code> 分别为要比较的两个事件对象，当返回大于 0 的数时 <code>event2</code> 会排在 <code>event1</code> 之前，如果小于 0 则反之，等于 0 时位置不变。如果不指定该选项，则默认按照事件的日期先后排序。</td>
    </tr>
    <tr>
      <td><code>eventCreator</code></td>
      <td><code>null</code></td>
      <td>指定一个函数用于创建事件在页面上对应的 DOM 元素。提供3个参数：<code>event</code> 为事件对象，<code>$event</code> 为自动生成的 DOM 元素，<code>cal</code> 为当前日历实例对象。</td>
    </tr>
    <tr>
      <td><code>dayFormater</code></td>
      <td><code>null</code></td>
      <td>指定一个函数用于进一步处理页面上每个日期对应的 DOM 元素。提供4个参数：<code>$cell</code> 为日期对应的 DOM 元素，<code>date</code> 为对应的日期，<code>events</code> 为日期内的事件列表，<code>cal</code> 为当前日历实例对象。</td>
    </tr>
  </tbody>
</table></div><h4>方法</h4><p>日历插件提供一组方法来向日历添加新的事件、更改已有事件或者删除已有事件。</p><h5>获取日历对象实例</h5><p>要使用日历对象方法，需要首先获取日历对象实例。每一个日历对象示例的引用都存储在对应的jQuery对象的data中，名称为<code>zui.calendar</code>。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 获取日历对象实例 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span></code></pre><h5>切换视图</h5><p>要切换不同的视图或所显示的日期范围，请使用日历对象的<code>display(view, date)</code>方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 切换视图或刷新视图 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">display</span><span class="pun">(</span><span class="str">'month'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'2014-8-14'</span><span class="pun">);</span><span class="pln">   </span><span class="com">// 切换视图为月份视图，并将日期范围限定为2014年8月</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">display</span><span class="pun">(</span><span class="str">'month'</span><span class="pun">);</span><span class="pln">                </span><span class="com">// 切换视图为月份视图，使用当前日期范围</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">display</span><span class="pun">();</span><span class="pln">                       </span><span class="com">// 重新刷新当前视图</span></code></pre><h5>重置日历数据</h5><p>要重置日历数据并对界面进行刷新，则可以使用日历对象上的 <code>resetData(data)</code> 方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 重置日历数据 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">resetData</span><span class="pun">({</span><span class="pln">
    calendars</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 新的日历数据</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    events</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="com">// 新的事件数据</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">});</span></code></pre><h5>增加事件</h5><h6>增加一个事件</h6><p>将一个新的事件对象作为参数来调用<code>addEvents</code>方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 增加一个事件 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> newEvent </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'吃饭了'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'要吃更多'</span><span class="pun">,</span><span class="pln"> start</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">12</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">),</span><span class="pln"> end</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">3</span><span class="pun">,</span><span class="lit">13</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)};</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">addEvents</span><span class="pun">(</span><span class="pln">newEvent</span><span class="pun">);</span></code></pre><h6>增加多个事件</h6><p>将包含一组事件的数组作为参数调用<code>addEvents</code>方法则可以一次性添加多个事件。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 增加多个事件 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> newEvents </span><span class="pun">=</span><span class="pln">
</span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'吃饭了'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'要吃更多'</span><span class="pun">,</span><span class="pln"> start</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">12</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">),</span><span class="pln"> end</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">3</span><span class="pun">,</span><span class="lit">13</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'学习了'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'要学更多'</span><span class="pun">,</span><span class="pln"> start</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">3</span><span class="pun">,</span><span class="lit">13</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">),</span><span class="pln"> end</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">10</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)}</span><span class="pln">
</span><span class="pun">];</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">addEvents</span><span class="pun">(</span><span class="pln">newEvents</span><span class="pun">);</span></code></pre><h6>事件对象</h6><p>事件对象实例可以指定以下属性：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性</th>
      <th>值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>title</code></td>
      <td>字符串</td>
      <td>事件标题</td>
    </tr>
    <tr>
      <td><code>desc</code></td>
      <td>字符串， 可选</td>
      <td>事件描述</td>
    </tr>
    <tr>
      <td><code>allDay</code></td>
      <td><em>   <code>true</code>
</em>   <code>false</code> (默认)</td>
      <td>是否为全天事件</td>
    </tr>
    <tr>
      <td><code>start</code></td>
      <td><em>   <code>"2014-8-14"</code>，表示日期的字符串
</em>   一个<code>Date</code>实例</td>
      <td>事件开始的时间</td>
    </tr>
    <tr>
      <td><code>end</code></td>
      <td><em>   <code>"2014-8-14"</code>，表示日期的字符串
</em>   一个<code>Date</code>实例</td>
      <td>事件结束的时间，如果<code>allDay</code>属性为<code>true</code>(即为全天事件)时该属性可选</td>
    </tr>
    <tr>
      <td><code>calendar</code></td>
      <td>字符串，可选</td>
      <td>事件所在的日历</td>
    </tr>
    <tr>
      <td><code>data</code></td>
      <td>任何值</td>
      <td>一个额外的属性用来存储其他与该事件关联的数据</td>
    </tr>
  </tbody>
</table></div><h5>移除事件</h5><p>指定需要移除的事件的<code>id</code>属性，或者同时指定多个<code>id</code>并放在一个数组中作为参数来调用<code>removeEvents</code>方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 移除事件 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">removeEvents</span><span class="pun">(</span><span class="str">'4343'</span><span class="pun">);</span><span class="pln">                   </span><span class="com">// 移除id为4343的事件</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">removeEvents</span><span class="pun">([</span><span class="str">'4343'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'4344'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'4345'</span><span class="pun">]);</span><span class="pln"> </span><span class="com">// 一次性移除多个事件</span></code></pre><h5>更新事件</h5><h6>更新事件属性</h6><p>将更新对象或者由包含更新对象的数组作为参数来调用方法<code>updateEvents</code>。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 移除事件 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">updateEvents</span><span class="pun">({</span><span class="pln">    </span><span class="com">// 更新一个事件</span><span class="pln">
    event</span><span class="pun">:</span><span class="pln"> </span><span class="str">'343'</span><span class="pun">,</span><span class="pln">          </span><span class="com">// 要更新的事件</span><span class="pln">
    changes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
          change</span><span class="pun">:</span><span class="pln"> </span><span class="str">'title'</span><span class="pun">,</span><span class="pln">          </span><span class="com">// 要更改的属性名称,</span><span class="pln">
          to</span><span class="pun">:</span><span class="pln">     </span><span class="str">'一个新的事件标题'</span><span class="pln">   </span><span class="com">// 更改后的值</span><span class="pln">
       </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">                         </span><span class="com">// 同时更改另一个属性</span><span class="pln">
          change</span><span class="pun">:</span><span class="pln"> </span><span class="str">'start'</span><span class="pun">,</span><span class="pln">          </span><span class="com">// 要更改的属性名称,</span><span class="pln">
          to</span><span class="pun">:</span><span class="pln">     </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)</span><span class="pln">  </span><span class="com">// 更改后的值</span><span class="pln">
       </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">updateEvents</span><span class="pun">([</span><span class="pln">    </span><span class="com">// 一次性更新多个事件</span><span class="pln">
    </span><span class="pun">{</span><span class="pln">
        event</span><span class="pun">:</span><span class="pln"> </span><span class="str">'343'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 更新第一个事件</span><span class="pln">
        changes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
              change</span><span class="pun">:</span><span class="pln"> </span><span class="str">'title'</span><span class="pun">,</span><span class="pln">          </span><span class="com">// 要更改的属性名称,</span><span class="pln">
              to</span><span class="pun">:</span><span class="pln">     </span><span class="str">'一个新的事件标题'</span><span class="pln">  </span><span class="com">// 更改后的值</span><span class="pln">
         </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">                            </span><span class="com">// 同时更改另一个属性</span><span class="pln">
            change</span><span class="pun">:</span><span class="pln"> </span><span class="str">'start'</span><span class="pun">,</span><span class="pln">          </span><span class="com">// 要更改的属性名称,</span><span class="pln">
            to</span><span class="pun">:</span><span class="pln">     </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="lit">2018</span><span class="pun">,</span><span class="lit">1</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)</span><span class="pln">  </span><span class="com">// 更改后的值</span><span class="pln">
         </span><span class="pun">}]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        event</span><span class="pun">:</span><span class="pln"> </span><span class="str">'344'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 更新另一个事件</span><span class="pln">
        changes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="com">// ...</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
</span><span class="pun">]);</span></code></pre><h5>增加日历</h5><h6>增加一个日历</h6><p>将一个新的日历对象作为参数来调用<code>addCalendars</code>方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 增加一个日历 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> newCalendar </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'work'</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'工作'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'这是一个工作日历'</span><span class="pun">,</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#ff0000'</span><span class="pun">};</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">addCalendars</span><span class="pun">(</span><span class="pln">newCalendar</span><span class="pun">);</span></code></pre><h6>增加多个日历</h6><p>将包含一组日历的数组作为参数调用<code>addCalendars</code>方法则可以一次性添加多个日历。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 增加多个日历 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> newCalendars </span><span class="pun">=</span><span class="pln">
</span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'work'</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'工作'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'这是一个工作日历'</span><span class="pun">,</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#ff0000'</span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'home'</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'家庭'</span><span class="pun">,</span><span class="pln"> desc</span><span class="pun">:</span><span class="pln"> </span><span class="str">'这是一个家庭日历'</span><span class="pun">,</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#00ff00'</span><span class="pun">}</span><span class="pln">
</span><span class="pun">];</span><span class="pln">
calendar</span><span class="pun">.</span><span class="pln">addCalendars</span><span class="pun">(</span><span class="pln">newCalendars</span><span class="pun">);</span></code></pre><h6>日历对象</h6><p>日历对象实例可以指定以下属性：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性</th>
      <th>值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>name</code></td>
      <td>字符串，为全英文标识</td>
      <td>日历名称</td>
    </tr>
    <tr>
      <td><code>title</code></td>
      <td>字符串，可选</td>
      <td>日历标题</td>
    </tr>
    <tr>
      <td><code>desc</code></td>
      <td>字符串， 可选</td>
      <td>日历描述</td>
    </tr>
    <tr>
      <td><code>color</code></td>
      <td>表示十六进制颜色值的字符串，可选</td>
      <td>日历颜色</td>
    </tr>
  </tbody>
</table></div><h5>获取和同步数据</h5><p>当进行日历事件的添加、更新或者移除操作时注意同步数据。</p><p>你随时可以获取当前所有日历或事件的数据。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 获取日历数据 */</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendar  </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#calendar'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.calendar'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> calendars </span><span class="pun">=</span><span class="pln"> calendar</span><span class="pun">.</span><span class="pln">calendars</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 获取所有日历对象实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> events    </span><span class="pun">=</span><span class="pln"> calendar</span><span class="pun">.</span><span class="pln">events</span><span class="pun">;</span><span class="pln">    </span><span class="com">// 获取所有事件对象实例</span></code></pre><p>当前获取了日历事件数据后可以手动直接更改所有属性，不过需要调用<code>display()</code>方法才能够将更改应用到界面中。</p><h4>事件</h4><p>日历中的事件既可以使用jQuery原生方法来绑定，也可以写在启动参数中。</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>事件名称</th>
      <th>jQuery事件名称</th>
      <th>说明</th>
      <th>特别的事件参数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>clickTodayBtn</code></td>
      <td><code>"clickTodayBtn.zui.calendar"</code></td>
      <td>点击日历头部的当天按钮时发生</td>
      <td>无</td>
    </tr>
    <tr>
      <td><code>clickNextBtn</code></td>
      <td><code>"clickNextBtn.zui.calendar"</code></td>
      <td>点击当前视图下一个日期范围按钮时发生</td>
      <td>无</td>
    </tr>
    <tr>
      <td><code>clickPrevBtn</code></td>
      <td><code>"clickPrevBtn.zui.calendar"</code></td>
      <td>点击当前视图上一个日期范围按钮时发生</td>
      <td>无</td>
    </tr>
    <tr>
      <td><code>clickEvent</code></td>
      <td><code>"clickEvent.zui.calendar"</code></td>
      <td>当点击一个事件时发生</td>
      <td><em>   <code>event.element</code> 获取当前点击的DOM对象实例
</em>   <code>event.event</code> 事件对象实例，当前点击的事件对象实例
<em>   <code>event.events</code> 事件对象实例数组，当前所有事件</em></td>
    </tr>
    <tr>
      <td><code>beforeAddCalendars</code></td>
      <td><code>"beforeAddCalendars.zui.calendar"</code></td>
      <td>在向日历添加一个新的日历之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消添加</td>
      <td>   <code>event.newCalendar</code> 新的日历对象实例
<em>   <code>event.data</code> 所有日历事件数据</em></td>
    </tr>
    <tr>
      <td><code>addCalendars</code></td>
      <td><code>"addCalendars.zui.calendar"</code></td>
      <td>在向日历添加一个新的日历之后发生</td>
      <td>   <code>event.newCalendars</code> 所有新的日历对象实例
<em>   <code>event.data</code> 所有日历事件数据</em></td>
    </tr>
    <tr>
      <td><code>beforeAddEvent</code></td>
      <td><code>"beforeAddEvent.zui.calendar"</code></td>
      <td>在向日历添加一个新的事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消添加</td>
      <td>   <code>event.newEvent</code> 新的事件对象实例
<em>   <code>event.data</code> 所有日历事件数据</em></td>
    </tr>
    <tr>
      <td><code>addEvents</code></td>
      <td><code>"addEvents.zui.calendar"</code></td>
      <td>在向日历添加一个或多个新的事件之后发生</td>
      <td>   <code>event.newEvents</code> 所有新的事件对象实例
<em>   <code>event.data</code> 所有日历事件数据</em></td>
    </tr>
    <tr>
      <td><code>beforeRemoveEvent</code></td>
      <td><code>"beforeRemoveEvent.zui.calendar"</code></td>
      <td>在向日历移除一个事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消移除</td>
      <td>   <code>event.event</code> 需要移除的事件对象实例
<em>   <code>event.eventId</code> 需要移除的事件id
</em>   <code>event.data</code> 所有日历事件数据</td>
    </tr>
    <tr>
      <td><code>removeEvents</code></td>
      <td><code>"removeEvents.zui.calendar"</code></td>
      <td>在向日历移除一个或多个事件之后发生</td>
      <td><em>   <code>event.removedEvents</code> 所有需要移除的事件对象实例
</em>   <code>event.data</code> 所有日历事件数据</td>
    </tr>
    <tr>
      <td><code>beforeChange</code></td>
      <td><code>"beforeChange.zui.calendar"</code></td>
      <td>更改一个事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消本次更改</td>
      <td><em>   <code>event.event</code> 要更改的事件对象实例
</em>   <code>event.change</code> 要更改的属性名称
<em>   <code>event.from</code> 更改之前该属性的值
</em>   <code>event.to</code> 更改之后新的值</td>
    </tr>
    <tr>
      <td><code>change</code></td>
      <td><code>"change.zui.calendar"</code></td>
      <td>当一个或多个事件发生更改时发生</td>
      <td><em>   <code>event.data</code> 所有日历事件数据
</em>   <code>event.changes</code> 数组，所有更改明细，每一项包含下列属性：
-   <code>event.event</code> 要更改的事件对象实例
-   <code>event.change</code> 要更改的属性名称
-   <code>event.from</code> 更改之前该属性的值
-   <code>event.to</code> 更改之后新的值</td>
    </tr>
    <tr>
      <td><code>beforeDisplay</code></td>
      <td><code>"beforeDisplay.zui.calendar"</code></td>
      <td>在重新显示视图之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消显示</td>
      <td><em>   <code>event.view</code> 字符串，要显示的视图名称
</em>   <code>event.date</code> 日期事件对象实例，要显示的日期</td>
    </tr>
    <tr>
      <td><code>display</code></td>
      <td><code>"display.zui.calendar"</code></td>
      <td>在重新显示视图之后发生</td>
      <td><em>   <code>event.view</code> 字符串，要显示的视图名称
</em>   <code>event.date</code> 日期事件对象实例，要显示的日期</td>
    </tr>
    <tr>
      <td><code>clickCell</code></td>
      <td><code>"clickCell.zui.calendar"</code></td>
      <td>当点击一个日期单元格时发生</td>
      <td><em>   <code>event.element</code> 获取被点击的单元格实例
</em>   <code>event.view</code> 字符串，当前视图名称
*   <code>event.date</code> 日期事件对象实例，当前单元格的日期</td>
    </tr>
  </tbody>
</table></div><h5>使用启动参数处理事件</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'calendar'</span><span class="pun">).</span><span class="pln">calendar</span><span class="pun">({</span><span class="pln">
    clickEvent</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">event</span><span class="pun">);</span><span class="pln">
        </span><span class="com">// console.log("你点击了一个事件");</span><span class="pln">
        </span><span class="com">// 处理 clickEvent 事件</span><span class="pln">
        </span><span class="com">// ...</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h5>使用jQuery方法绑定事件处理函数</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'calendar'</span><span class="pun">).</span><span class="pln">calendar</span><span class="pun">().</span><span class="pln">on</span><span class="pun">(</span><span class="str">"clickEvent.zui.calendar"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">event</span><span class="pun">);</span><span class="pln">
    </span><span class="com">// console.log("你点击了一个事件");</span><span class="pln">
    </span><span class="com">// 处理 clickEvent 事件</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
</span><span class="pun">});</span></code></pre><link href="__ZUI__/lib/calendar/zui.calendar.css" rel="stylesheet"></article></section></div>


</section>
{/block}